<template>
	<div>
		<goTop></goTop>	
		<select1 style="z-index: 100;position: relative;"></select1>
		<div>
			<div class="htitle">
				<a class="zonghe" href="javascript:void(0)"><span class="h_zong" @click="hchoose">综合</span><span class="iconfont icon-sanjiaoshang"></span><span class="iconfont icon-sanjiaoxia"></span></a>
				<a class="zonghe" href="javascript:void(0)"><span class="price" @click="h_price">价格</span><span class="iconfont icon-xiangshangfanye hsanjiaotop"></span><span class="iconfont icon-xiangxiafanye hsanjiaobottom"></span></a>
				<a class="zonghe h_xiaoliang" href="javascript:void(0)" @click="sales" >销量</a>
				<a class="zonghe shaixuan" href="javascript:void(0)" @click="shaixuanshow">筛选</a>
			</div>
			<!--综合-->
			<div class="hzonghe_btn">
				<ul>
					<li class="hzonghe_btn_common" @click="h_show" :class="show?'hzonghe_content':''"><span>综合</span>
						<a href="javascript:void(0)" class="iconfont  icon-xiangxiafanye" :class="show?'hright_right':'hright_disnone'"></a>
					</li>
					<li class="hzonghe_btn_common top_borer" @click="h_second" :class="show?'':'hzonghe_content'"><span>评论从高到低</span>
						<a href="javascript:void(0)" class="iconfont  icon-xiangxiafanye" :class="show?'hright_disnone ':'hright_right'"></a>
					</li>
				</ul>

			</div>
			<!--筛选-->
			<div class="hshaixuan_total" style="z-index:101;">

				<div class="hshaixuan_Left" @click="shaixuanhide"></div>
				<div class="txuan_total">
					<div class="txuan_kuang">
						<ul>
							<li class="txuan_border">
								<span class="kuang" @click="ziying_show" ref="aa" :class="mm1?'kuang_style':''">国美自营</a></span>
								<span class="kuang" :class="mm?'kuang_style':''" @click="show_mm">仅看有货</span>
								<span class="kuang" :class="mm2?'kuang_style':''" @click="show_mm2">返利</span>
								<span class="kuang" @click="show_mm2">团抢商品</span>
							</li>
							<li class="txuan_border">
								<h3>配送至</h3>
								<!--自动获取地址  三级联动-->
								<span class="haddress_right"><a href="javascript:void(0)" class="iconfont icon-dizhi" @click="addresshow" >北京北京市朝阳区朝外街道  </a><a href="javascript:void(0)" class="iconfont icon-lunboyoufangun address_you">️</a></span>

							</li>
							<li class="txuan_border">
								<h3 class="hshaixuan_inlinB">价格区间</h3>
								<span class="hshaixuan_price"><span class="kuang">最低价</span>--
								<span class="kuang">最高价</span></span>
							</li>

							<li class="txuan_border_width" ref="numbrand">
								<h3>品牌</h3><span class="hshow_content"> </span>
								<a href="javascript:void(0)" class="iconfont icon-xiangxiafanye brand" @click="h_show_xiala"></a>
								<span class="kuang" :class="mm4?'kuang_style':''" @click="show_mm4">黄尾袋鼠</span>
								<span class="kuang" :class="mm5?'kuang_style':''" @click="show_mm5">长城</span>
								<span class="kuang" :class="mm6?'kuang_style':''" @click="show_mm6">CELLAR</span>
								<span class="kuang" :class="mm7?'kuang_style':''" @click="show_mm7">张裕</span>
								<span class="kuang" :class="mm8?'kuang_style':''" @click="show_mm8">小企鹅</span>
								<span class="kuang" :class="mm9?'kuang_style':''" @click="show_mm9">拉菲</span>
								<div class="h_show_show">
									<span class="kuang" :class="mm10?'kuang_style':''" @click="show_mm10">金种子</span>
									<span class="kuang" :class="mm11?'kuang_style':''" @click="show_mm11">Waywood</span>
									<span class="kuang">ELDERTON</span>
									<span class="kuang">奔富</span>
									<span class="kuang">蒙特斯</span>
									<span class="kuang">猎豹庄</span>
									<span class="h_total">全部品牌</span>
								</div>
							</li>

							<li class="txuan_border_width">
								<h3>产地</h3>
								<a href="javascript:void(0)" class="iconfont icon-xiangxiafanye brand"></a>
								<span class="kuang">阿根廷</span>
								<span class="kuang">澳大利亚</span>
								<span class="kuang">德国</span>
								<span class="kuang">法国</span>
								<span class="kuang">美国</span>
								<span class="kuang">中国</span>
								<span class="kuang">智利</span>
								<span class="kuang">西班牙</span>
							</li>

							<li class="txuan_border_width">
								<h3>等级</h3>
								<a href="javascript:void(0)" class="iconfont icon-xiangxiafanye brand"></a>
								<span class="kuang">餐酒</span>
								<span class="kuang">普通级</span>
								<span class="kuang">优质等级</span>
							</li>

							<li class="txuan_border_width">
								<h3>度数范围</h3>
								<a href="javascript:void(0)" class="iconfont icon-xiangxiafanye brand"></a>
								<span class="kuang">4.9度及以下</span>
								<span class="kuang">5-9.9度</span>
								<span class="kuang">10-19.9度</span>
							</li>

						</ul>
						<div class="h_center">
							<span class="pshaixuan_reset" @click="reset_show">重置</span>
							<span class="hshaixuan_sure" @click="sure_show">确定</span>
						</div>
					</div>

				</div>
			</div>
			<!--筛选部分结束-->
			<!--地址选择 三级联动部分-->
			<div class="adress" style="z-index: 102;">
				<div class="h_send">
					<h3>配送至</h3>
					<a href="javascript:void(0)" class="iconfont icon-cuohao error" @click="addreshide"></a>
				</div>
				<v-distpicker :placeholders="placeholders" class="txuan_total_address"  type="mobile" @selected='address_show'></v-distpicker>
			</div>
			<!--地址选择结束-->

		</div>
		<div>
			<a href="javascript:void(0)" class="hyouhuo guomei_ziying"><span class="hziying" :class="mm1?'kuang_style':''">国美自营</span></a>
			<a href="javascript:void(0)" class="hyouhuo"><span class="hziying" :class="mm02?'kuang_style':''" @click="youhuo">仅看有货</span></a>
			<a href="javascript:void(0)" class="hyouhuo" @click="fanli"><span class="hziying" :class="mm03?'kuang_style':''">返利</span></a>
			<a href="javascript:void(0)" class="hyouhuo"><span class="hziying" :class="mm04?'kuang_style':''" @click="pinpai">品牌</span></a>
		</div>
		<div class="h_active">
			<span class="content">查看参与"818国美嗨购节"活动商品</span><span class="h_round"><a href="javascript:void(0)" class="iconfont icon-lunboyoufangun"></a></span>
		</div>
		<div class="hgoods">
			<ul class="hgoods_show">
				<li class="hgd" v-for="item in arr">
					<a href="#/detail" class="ha_mask"></a>
					<img :src= "'static/'+item.src " alt="鹿酒" class="hzonghe_img" />
					<div class="info_box">
						<strong class="hstrong">{{item.title}}</strong>
						<p>
							<em class="sale_tag">{{item.sales1}}</em>
							<em class="sale_tag">{{item.sales2}}</em>
						</p>
						<p><b class="hprice">{{item.price}}</b>
						</p>
						<em class="comments">{{item.comments}}人评论</em>
					</div>
				</li>

			</ul>
		</div>
		<div class="bottom">
			<span class="h_content">没有更多商品了......</span>
			<a href="javascript:void(0)"></a>
		</div>
		<!--购物车按钮-->
		<span class="hround hroundp"><a href="javascript:void(0)" class="iconfont icon-daohanggouwuche hcommon"></a></span>
		<!--宝贝没找到页面-->
		<div class="baby_none">
			<div class="baby_none_show">
				<img src="../../../src/assets/liu/download.png" alt="" style="width: 80%;"/>
				<br />
				<span>宝贝没找到┭┮﹏┭┮</span>
			</div>
			<div class="h_fanhui" style="width: 100%; height:4rem;background: rgba(220,220,220,0.5);margin-top: 9.2rem;text-align: center;line-height: 4rem;">
				<a href="javascript:void(0)" class="h_back" style="font-size: 1.5rem;color: grey;">返 回</a>
			</div>
			
		</div>

	</div>

	</div>
</template>

<script>
	import VDistpicker from 'v-distpicker'
	import select1 from "./select1.vue"
	import goTop from '../Header/goTop'
	
	export default {
		name: "sales",
		data() {
			return {
				arr:[],
				items: [{
					src: require("../../assets/zonghe/lujiu.jpg"),
					title: "买6得8 椰岛牌鹿龟酒 500ml*6瓶 下单即送同款鹿角酒和500g椰岛椰汁各一瓶(整箱)",
					sale1: "满减",
					sale2: "券",
					price: "¥228",
					num: "16"
				}, {
					src: require("../../assets/zonghe/zhibao.jpg"),
					title: "张裕官方旗舰店【整箱特惠】04167 张裕至宝特质三鞭酒500ml*6",
					sale1: "满减",
					sale2: "券",
					price: "¥293",
					num: "21"
				}, {
					src: require("../../assets/zonghe/dongchongxiacao.jpg"),
					title: "六瓶超值 康仁堂北冬虫夏草酒营养酒品牌健康滋补酒(125ml*6)",
					sale1: "满减",
					sale2: "券",
					price: "¥59",
					num: "0"
				}, {
					src: require("../../assets/zonghe/lujiu.jpg"),
					title: "买6得8 椰岛牌鹿龟酒 500ml*6瓶 下单即送同款鹿角酒和500g椰岛椰汁各一瓶(整箱)",
					sale1: "满减",
					sale2: "券",
					price: "¥228",
					num: "16"
				}, {
					src: require("../../assets/zonghe/zhibao.jpg"),
					title: "张裕官方旗舰店【整箱特惠】04167 张裕至宝特质三鞭酒500ml*6",
					sale1: "满减",
					sale2: "券",
					price: "¥293",
					num: "21"
				}, {
					src: require("../../assets/zonghe/dongchongxiacao.jpg"),
					title: "六瓶超值 康仁堂北冬虫夏草酒营养酒品牌健康滋补酒(125ml*6)",
					sale1: "满减",
					sale2: "券",
					price: "¥59",
					num: "0"
				}],
				placeholders: {
					province: '-------省-------',
					city: '---市---',
					area: '---区---'
				},
				zonghe: true,
				show: true,
				ziying: true,
				mm:false,
				mm1:false,
				mm2:false,
				mm4:false,
				mm5:false,
				mm6:false,
				mm7:false,
				mm8:false,
				mm9:false,
				mm10:false,
				mm11:false,
				mm02:false,
				mm03:false,
				mm04:false,
			    bool:false,
				flag:true,
				xiaoliang:true
			}
		},
		methods: {
			//控制筛选页面显示
			shaixuanshow: function() {
				$(".hshaixuan_total").css("display", "block");
				//价格按钮变回原样
				$(".icon-xiangshangfanye").css("color", "#D2D2D2");
				$(".icon-xiangxiafanye").css("color", "#D2D2D2");
				$(".h_xiaoliang").css("color", "#D2D2D2");
				
			},
			//控制筛选页面关闭
			shaixuanhide: function() {
				$(".hshaixuan_total").css("display", "none");
				$(".baby_none").css("display","block");
			},
			//控制地址页面出现
			addresshow: function() {
				$(".adress").css("display", "block");
			},
			//地址页面关闭
			addreshide: function() {
				$(".adress").css("display", "none");
			},
			//销量按钮
			sales:function(){
				//价格按钮变回原样
				$(".icon-xiangshangfanye").css("color", "#D2D2D2");
				$(".icon-xiangxiafanye").css("color", "#D2D2D2");
				if(this.xiaoliang==true){
				$(".h_xiaoliang").css("color", "deeppink");
				//按销量排序
				var _this = this;
				this.axios.get('http://localhost:3000/router/select',{
					params:{
						condition:_this.sql.goods.sales
					}
				}).then(function(res){
						_this.arr = res.data;
					})
				}else{
					$(".h_xiaoliang").css("color", "#D2D2D2");
					this.xiaoliang=!this.xiaoliang;
				}
					
			},
			//综合按钮
			hchoose: function() {
//				价格按钮变回原样
				$(".icon-xiangshangfanye").css("color", "#D2D2D2");
			$(".icon-xiangxiafanye").css("color", "#D2D2D2");
				$(".h_xiaoliang").css("color", "#D2D2D2");
				
				if(this.zonghe) {
//					单次点击
					$(".hzonghe_btn").css("display", "block");
					$(".icon-sanjiaoshang").css("display", "none");
					$(".icon-sanjiaoxia").css("display", "inline-block");
					$(".icon-sanjiaoxia").css("color", "deeppink");

				} else {
//					双次点击
					$(".hzonghe_btn").css("display", "none");
					$(".icon-sanjiaoxia").css("display", "none");
					$(".icon-sanjiaoshang").css("display", "inline-block");
				}
				//此时this指向default
				this.zonghe = !this.zonghe;
			},
			//综合第一li
			h_show: function() {
				//综合排序
				var _this = this;
				this.axios.get('http://localhost:3000/router/select',{
					params:{
						condition:_this.sql.goods.select
					}
				}).then(function(res){
					//返回的数据
					_this.arr = res.data;
				})
				this.show = !this.show;
			},
			h_second: function() {
				//按评价由高到低排序
				var _this=this;
				this.axios.get('http://localhost:3000/router/select',{
					params:{
						//前端传给后台的执行语句
						condition:_this.sql.goods.commentsup
					}
					//成功的话返回
				}).then(function(res){
					//返回的数据
					_this.arr = res.data;
					//失败的话 返回
				})
				this.show = !this.show;	
			},
			//下拉
			h_show_xiala: function() {
				this.show = !this.show;
				if(this.show==false){
					$(".h_show_show").css("display","block");
				}else{
					$(".h_show_show").css("display","none");
				}
			},
			//自营按钮
			ziying_show:function(){
				this.$refs.aa.style.color="deeppink";
					this.mm1=!this.mm1;
					},
			address_show:function(data){
				var str = data.province.value+data.city.value+data.area.value;
				//把地址返回给页面
				$(".icon-dizhi").html(str);
			},
			show_mm:function(){
				this.mm=!this.mm;					
			},
			show_mm1:function(){
				this.mm1=!this.mm1;
			},
			youhuo:function(){
				this.mm02=!this.mm02;
			},
			fanli:function(){
				this.mm03=!this.mm03;
			},
			pinpai:function(){
				this.mm04=!this.mm04;
			},
			show_mm2:function(){
				
				this.mm2=!this.mm2;
			},
			show_mm4:function(e){
				if(!this.mm4){
					var strr = $(".hshow_content").text();
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					var str=$(".hshow_content").text();					
					var index=str.indexOf(",");
					var reg = new RegExp("黄尾袋鼠,");
					var smr = str.replace(reg,"");
				    str=str.substring(index+1,str.length);
				    $(".hshow_content").html(smr);
				}
				this.mm4=!this.mm4;
			},
			show_mm5:function(e){
				if(!this.mm5){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("长城,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm5=!this.mm5;
			},
			show_mm6:function(e){
				if(!this.mm6){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("CELLAR,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm6=!this.mm6;
			},
			show_mm7:function(e){
				if(!this.mm7){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("张裕,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm7=!this.mm7;
			},
			show_mm8:function(e){
				if(!this.mm8){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("小企鹅,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm8=!this.mm8;
			},
			show_mm9:function(e){
				if(!this.mm9){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("拉菲,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm9=!this.mm9;
			},
			show_mm10:function(e){
				if(!this.mm10){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("金种子,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm10=!this.mm10;
			},
			show_mm11:function(e){
				if(!this.mm11){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("Waywood,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
//				    把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm11=!this.mm11;
			},
			//重置按钮 
			reset_show:function(){
				$(".kuang").removeClass("kuang_style");
				$(".hshow_content").text("");
			},
			//确定按钮
			sure_show:function(){
				//关闭本页面
				$(".hshaixuan_total").css("display","none");
				//在商品页面展示其内容
				$(".baby_none").css("display","block");
			},
			//
					//按价格排序
					h_price:function(){
						this.bool = false;
						if(this.bool == false) {
						this.flag = !this.flag;
						if(this.flag == false) {
							//销量按钮变回原来的颜色
							$(".h_xiaoliang").css("color", "#D2D2D2");
							$(".icon-xiangshangfanye").css("color", "deeppink");
							$(".icon-xiangxiafanye").css("color", "#D2D2D2");
							$(".curpage").attr("href", "#/priceup");
							var _this = this;
							this.axios.get('http://localhost:3000/router/select',{
								params:{
									condition:_this.sql.goods.priceup
								}
							}).then(function(res){
								//返回的数据
								_this.arr = res.data;						
							})
						} else {
							this.flag = true;
							$(".curpage").attr("href", "#/pricedown");
							$(".icon-xiangxiafanye").css("color", "deeppink");
							$(".icon-xiangshangfanye").css("color", "#D2D2D2");
							var _this = this;
							this.axios.get('http://localhost:3000/router/select',{
								params:{
									condition:_this.sql.goods.pricedown
								}
							}).then(function(res){
								//返回的数据
								_this.arr = res.data;
							}).catch(function(err){
							})
							
						}
			
					} else {
						//这部分 加到其他几个点击事件中
						this.bool = true;
						$(".icon-xiangshangfanye").css("color", "#D2D2D2");
						$(".icon-xiangxiafanye").css("color", "#D2D2D2");
					}	

				}
		},
		components: {
			select1,
			VDistpicker,
			goTop
		},
		mounted() {
			//正常显示的页面
			var _this = this;
				this.axios.get('http://localhost:3000/router/select',{
					params:{
						condition:_this.sql.goods.all
					}
				}).then(function(res){
					//返回的数据
					_this.arr = res.data;
				})
			//国美自营页面
			$('.guomei_ziying').click(function() {
				//价格按钮变回原样
				$(".icon-xiangshangfanye").css("color", "#D2D2D2");
				$(".icon-xiangxiafanye").css("color", "#D2D2D2");
				this.ziying = !this.ziying;
				if(this.ziying == false) {
					$(".baby_none").css("display", "block");
					$(".guomei_ziying").css("color","deeppink");
				} else {
					$(".baby_none").css("display", "none");
					$(".guomei_ziying").css("color","#2d2d2d");
				}
				
			})
			
		}
	}

	$(function() {
	//查看参与818国美嗨购节部分
	var bol = true;
	$(".h_active").click(function() {
		bol = !bol;
		if(bol == false) {
			$(".content").text("返回查看全部商品");
			$(".content").css("color", "#2d2d2d");
			$(".icon-lunboyoufangun").css("color", "#2d2d2d");
			$(".h_round").css("border-color", "#2d2d2d");
		} else {
			$(".content").text('查看参与"818国美嗨购节"活动商品');
			$(".content").css("color", "deeppink");
			$(".icon-lunboyoufangun").css("color", "deeppink");
			$(".h_round").css("border-color", "deeppink");
		}
	})
	
	$(".h_back").click(function(){
		$(".baby_none").css("display","none");
	})
		

	})
	
	$(function(){
		$(".kuang").removeClass("kuang_style");
	})

	//这种方法也可以跳转页面
			$(".shaixuan").click(function(){
				$(".shaixuan").attr("href","#/shaixuan");
			})

	
</script>

<style scoped>
	body {
		overflow: hidden;
		overflow-y: visible;
	}
	
	.htitle {
		width: 100%;
		position: relative;
	}
	
	.zonghe {
		width: 25%;
		height: 1.6rem;
		line-height: 1.6rem;
		display: inline-block;
		text-align: center;
		float: left;
		border-bottom: 1px solid rgba(210, 210, 210, 0.5);
		border-top: 1px solid rgba(210, 210, 210, 0.5);
		font-size: 1.2rem;
		text-decoration: none;
		color: grey;
		padding: 0.2rem 0;
	}
	
	.htitle span {
		padding-right: 0.3rem;
	}
	
	.icon-sanjiaoshang {
		color: deeppink;
		position: absolute;
		top: 0;
	}
	
	.icon-sanjiaoxia {
		color: #D2D2D2;
		position: absolute;
		top: 0;
		display: none;
	}
	
	.hsanjiaotop {
		position: absolute;
		top: -0.2rem;
		font-size: 0.15rem;
		color: #D2D2D2;
	}
	
	.hsanjiaobottom {
		position: absolute;
		top: 0.4rem;
		font-size: 0.15rem;
		color: #D2D2D2;
	}
	
	.htitle div {
		display: inline-block;
	}
	/*下方自营等*/
	
	.hyouhuo {
		width: 25%;
		height: 1.8rem;
		line-height: 1.8rem;
		display: inline-block;
		text-align: center;
		float: left;
		font-size: 0.26rem;
		text-decoration: none;
		color: grey;
		padding: 0.4rem 0;
	}
	
	.hziying {
		background: rgba(204, 204, 204, 0.2);
		width: 80%;
		display: inline-block;
		font-size: 0.7rem;
	}
	/*查看更多*/
	
	.h_active {
		border-top: 4px solid rgba(204, 204, 204, 0.3);
		border-bottom: 4px solid rgba(204, 204, 204, 0.3);
		height: 1.6rem;
		line-height: 1.6rem;
		padding: 0.4rem 0;
		margin-top: 4.6rem;
		text-align: center;
		color: deeppink;
	}
	
	.icon-lunboyoufangun {
		font-size: 0.1rem;
		text-decoration: none;
		color: deeppink;
	}
	/*商品列表*/
	
	.hgd {
		position: relative;
		margin-bottom: 2%;
		height: 9.2rem;
	}
	/*遮罩*/
	
	.ha_mask {
		width: 99%;
		height: 9.2rem;
		position: absolute;
		display: block;
		background: rgba(255, 255, 255, 0.2);
	}
	
	.hgoods {
		margin-top: 0.2rem;
	}
	
	.hzonghe_img {
		width: 28%;
		padding: 0 0.5rem;
		height: 9.2rem;
	}
	/*右侧描述*/
	
	.info_box {
		width: 65%;
		margin-left: 33%;
		margin-top: -108px;
		border-bottom: 1px solid rgba(204, 204, 204, 0.4);
		padding-bottom: 0.2rem;
	}
	
	.sale_tag {
		border: 1px solid deeppink;
		font-style: normal;
	}
	
	.hprice {
		font-size: 1.4rem;
		color: deeppink;
	}
	/*strong行标签不能设置宽和高*/
	
	.hstrong {
		font-size: 1.05rem;
		height: 3rem;
		overflow: hidden;
		display: inline-block;
	}
	/*下移*/
	
	.down {
		margin-top: 108px;
	}
	/*评论*/
	
	.comments {
		font-size: 0.1rem !important;
		font-style: normal;
	}
	/*底部*/
	
	.bottom {
		width: 100%;
		height: 4rem;
		background: rgba(204, 204, 204, 0.8);
		text-align: center;
		line-height: 4rem;
	}
	/*圆*/
	
	.hround {
		width: 2.5rem;
		height: 2.5rem;
		line-height: 2.5rem;
		border-radius: 50%;
		display: inline-block;
		text-align: center;
		box-shadow: 0 0 2px grey;
	}
	
	.hcommon {
		text-decoration: none;
		color: grey;
		font-size: 2rem;
	}
	
	.hroundp {
		position: fixed;
		right: 1.5rem;
		bottom: 15%;
	}
	
	.hroundd {
		position: fixed;
		right: 1.5rem;
		bottom: 2%;
	}
	/*筛选*/
	
	.hselect_shaixuan {
		width: 100%;
	}
	/*圆*/
	
	.h_round {
		width: 1.2rem;
		height: 1.2rem;
		border-radius: 50%;
		border: 0.5px solid deeppink;
		display: inline-block;
		text-align: right;
		line-height: 1.4rem;
		margin-left: 0.2rem;
	}
	
	.container {
		display: flex;
		align-items: center;
	}
	/*筛选部分*/
	
	.hshaixuan_total {
		width: 100%;
		position: fixed;
		z-index: 5;
		top: 0;
		display: none;
		height: 100%;
		overflow: hidden;
		overflow-y: visible;
	}
	
	.hshaixuan_Left {
		width: 9%;
		height: 100%;
		background: rgba(0, 0, 0, 0.1);
		position: absolute;
		left: 0;
	}
	
	.txuan_total {
		width: 90%;
		margin-left: 9%;
	}
	
	.txuan_kuang {
		width: 100%;
		background: rgba(255, 255, 255, 1);
	}
	
	.txuan_border {
		padding-top: 2%;
		padding-bottom: 2%;
		border-bottom: 1px solid rgba(243, 243, 243, 1);
	}
	
	.txuan_border_width {
		padding-top: 2%;
		padding-bottom: 2%;
		border-bottom: 4px solid rgba(227, 227, 229, 1);
		position: relative;
	}
	
	.kuang {
		width: 30%;
		height: 1.8rem;
		line-height: 1.8rem;
		display: inline-block;
		text-align: center;
		font-size: 0.26rem;
		text-decoration: none;
		color: grey;
		padding: 0.4rem 0;
		background: rgb(227, 227, 229, 0.8);
		margin: 2% 1% 0 1%;
	}
	/*品牌部分隐藏内容*/
	.h_show_show{display: none;}
	.pshaixuan_reset {
		width: 49%;
		height: 3rem;
		text-align: center;
		line-height: 3rem;
		background: rgba(242, 242, 242, 1);
		display: inline-block;
		color: black;
		font-size: 1.2rem;
	}
	
	.hshaixuan_sure {
		width: 49%;
		height: 3rem;
		text-align: center;
		line-height: 3rem;
		background: rgba(255, 20, 147, 1);
		display: inline-block;
		color: white;
		font-size: 1.2rem;
	}
	
	.h_center {
		margin: 0 auto;
		width: 98%;
	}
	
	.h_total {
		width: 100%;
		text-align: center;
		line-height: 2rem;
		height: 2rem;
		display: inline-block;
		text-align: center;
		margin-top: 1rem;
		border-top: 1px solid rgba(243, 243, 243, 1);
	}
	
	h3 {
		font-size: 1.2rem;
	}
	/*筛选部分 下拉按钮*/
	
	.brand {
		position: absolute;
		right: 5%;
		top: 3%;
		text-decoration: none;
		color: grey;
	}
	
	.hshaixuan_total_fenlei {
		position: absolute;
		right: 3%;
		color: deeppink;
	}
	/*右翻*/
	
	.haddress_right {
		font-size: 0.8rem !important;
	}
	/*地址部分*/
	
	.adress {
		width: 90%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 1%;
		background: rgba(255, 255, 255, 1);
		z-index: 20;
		display: none;
	}
	
	.txuan_total_address {
		width: 100%;
		margin-top: 10%;
	}
	
	.h_send {
		width: 96%;
		position: relative;
		top: 3%;
		left: 2%;
		background: rgba(255, 255, 255, 1);
	}
	
	.error {
		position: absolute;
		right: 5%;
		top: 3%;
		text-decoration: none;
		color: grey;
	}
	/*综合部分*/
	
	.hzonghe_btn {
		width: 100%;
		position: absolute;
		top: 9%;
		background: rgba(242, 242, 242, 1);
		z-index: 5;
		display: none;
	}
	
	.hzonghe_btn_common {
		width: 95%;
		height: 3rem;
		line-height: 3rem;
		margin-top: 0.5rem;
		font-size: 1.5rem;
		padding-left: 5%;
	}
	
	.top_borer {
		border-top: 1px solid grey;
	}
	
	.hzonghe_content {
		color: deeppink;
	}
	
	.hright_right {
		position: absolute;
		right: 5%;
		color: deeppink !important;
		text-decoration: none;
		display: inline-block;
	}
	
	.hright_disnone {
		display: none;
		position: absolute;
		right: 5%;
	}
	/*宝贝没找到页面*/
	
	.baby_none {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 20%;
		background: rgba(255, 255, 255, 1);
		display: none;
	}
	.baby_none_show {
		text-align: center;
		margin-top: 10%;
	}
	.baby_none_show span {
		font-size: 1.5rem;
	}
	/*kuang的点击样式*/
	.kuang_style{color: deeppink;}
	/*地址后面的右翻*/
	.address_you{position:absolute;right: 5%;color: grey;}
	/*品牌内 内容添加*/
	.hshow_content{width: 70%;position: absolute;top: 2.5%;left: 15%;color: deeppink;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
	/*地址位置*/
	.icon-dizhi{width: 70%;margin-left: 15%; text-decoration: none; color: deeppink !important;}
	
	
	
	
</style>